Microfrontends på min side

Kom i gang

Ta utgangspunkt i template for ssr microfrontend og opprett et nytt repository basert på denne templaten.

Konfigurer applikasjonen

  1. Bytt ut applikasjonsnavn i konfigurasjonsfiler

CMD + Shift + F og søk etter tms-microfrontend-template-ssr og erstatt dette med ditt applikasjonsnavn.

  1. Tilpass nais.yaml

Tilpass både nais/dev-gcp/nais.yaml og nais/prod-gcp/nais.yaml. Alle felter som må tilpasses har tilhørende kommentar med instruksjon i template.

  1. Tilpass innholdet i .github/workflows/deploy.yaml

Tilpass deploy.yaml slik kommentarene i koden instruerer. Applikasjonsnavn skal være likt navn på repository.

Du kan vente med å kommentere inn og tilpasse stegene update-manifest-prod og deploy prod til applikasjonen er klar for prodsetting.

  1. Etterspør tilganger

Be om tilgang til å oppdatere manifest og deploye applikasjonen til nais på slack kanalen #minside-microfrontends

  1. Deploy til produksjon

Når applikasjonen er klar for prodsetting, kan du kommentere inn update-manifest-prod og deploy-prod stegene i .github/workflows/deploy.yaml. Sørg for at de er fylt inn likt som i steg 3.

Bruk av template

Språk

Bruk språkoppsett satt opp i template og legg språkvariablene inn i /language/text.ts

Fallback

Microfrontenden bør du tilby en fallback - se src/pages/[locale]/fallback.astro

Produktanalyse

Vi bruker dekoratøren sin analyticsfunksjon - se src/pages/[locale]/index.astro

CSS

For lokal css kan du bruke css moduler som vanlig.

For bruk av designsystemet må medfølgende css isoleres til microfrontenden. Importer derfor kun de delene av ds-css som er i bruk. Aksel har laget et verktøy for dette som genererer listen med imports du trenger. Legg listen med imports i /styles/aksel.css.

CSS isolering er gjort via prefix av designsystemets klassenavn. For at dette skal fungere, må du beholde section taggen som wrapper hver page, hvor applikasjonsnavnet er brukt som klassenavn.

Client-side interaktivitet

Ved behov for client-side interaktivitet kan Astros Client Islands tas i bruk. Et eksempel ligger i /components/ClientIsland.tsx og oppfører seg som en vanlig React komponent.

Merk at interaktivitet er tilgjengeliggjort via React. Dette medfører at React major versjonen må samsvare i microfrontend og på Min side.

Template repoet er satt opp med client-side interaktivitet som default. Hvis microfrontenden ikke har behov for dette kan du fjerne hele integrations-steget i astro.config.mjs, samt react, react-dom og rollup-plugin-import-map fra package.json.

Design

Vi stiller visse designkrav til utformingen av microfrontends, for å sikre en helhetlig brukeropplevelse.

Astro

Repoet er skrevet om fra React til Astro. Se Astro sin offisielle dokumentasjon eller ta kontakt med oss i #minside-microfrontends for hjelp med overgangen.

Aktivere og deaktivere microfrontends

  1. Koble til kafka topicet
    Abonner på min-side-microfrontend-topicet. NOTE: microfrontendId skal være identisk med navnet på Github-repoet du opprettet basert på templatet tidligere i guiden. Hvis du skriver om en gammel microfrontend til ssr så skal du beholde samme microfrontendId.

  2. Send meldinger
    Du kan nå sende oss Enable/Disable meldinger via Kafka for å skru aktivere/deaktivere microfrontenden for spesifikke brukere.

Meldingsformat

// Enable
{
    "@action": "enable",
    "ident": <ident for bruker: fnr/dnr>,
    "microfrontend_id": <microfrontendId>,
    "sensitivitet": <nivå som kreves for å se innholdet i microfrontenden, gyldige verdier: substantial og high>,
    "@initiated_by": <ditt-team>
}

// Disable
{
    "@action":  "disable",
    "ident": <ident for bruker: fnr/dnr>,
    "microfrontend_id": <microfrontendId>,
    "@initiated_by":<ditt-team>
}

Tips Et meldingsbygger-bibliotek finnes på Github packages

Hva er sensitivitet?

sensitivitet samsvarer med ID-portens ACR-verdier.

Verdi Når brukes den?
high Innhold krever innlogging med idporten-loa-high.
substantial Innhold kan vises uavhengig av innloggingsnivå.

Hvis feltet utelates, antar systemet high. Logger brukeren inn med idporten-loa-substantial og det finnes microfrontends som krever idporten-loa-high, får brukeren tilbud om «step-up»-innlogging. Se også NAIS-dokumentasjonen om security levels.

Lurer du på noe?

Dersom du har spørsmål, kan disse stilles i #minside-microfrontends kanalen på slack.